<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <script type="text/javascript" src="html2canvas.js"></script> -->
  <title>分享</title>
  <style>

    body {
      max-width: 750px;
      margin: 0 auto;
      background: #f7f7f7;
      font-family: 'Microsoft YaHei'
    }


    .red {
      color: #ff5c3d;
    }

    .bold{
      font-weight: bold;
    }

    header {
      background: url(https://bangz.oss-cn-hangzhou.aliyuncs.com/h5/share_timeline_base/banner.jpg) no-repeat center/cover;
      height: 2rem;
      overflow: hidden;
    }

    .user{
      height: .6rem;
      font-size: .32rem;
      color: #333;
      padding: .3rem 0;
      line-height: .6rem;
    }

    .portrait {
      border-radius: 50%;
      height: .6rem;
      width: .6rem;
      padding: 0 .2rem;
      float: left;
    }

    .name{
      padding-right: .2rem;
      float: left;
    }

    .title {
      border-top: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
      background: #fff;
      padding: .3rem .2rem;
      color: #333;
    }

    .title__content {
      font-size: .28rem;
      font-weight: bold;
      padding-bottom: .3rem ;
    }

    .title__amount{
      background:#fff2f0;
      padding: .28rem .2rem;
      border:solid #ff5e43 1px;
      border-radius: 3px;
      font-size: .28rem;
      color: #ff5d44;
      position: relative;
    }

    .title__amount-t{
      max-width: 4rem
    }

    .title__btn{
      background:#ff5e43;
      border-radius: .65rem;
      color:white;
      font-weight: bold;
      height: .65rem;
      width: 2.6rem;
      line-height: .65rem;
      text-align: center;
      position: absolute;
      right: .2rem;
      top: 50%;
      margin-top: -.325rem;
    }

    .title__tip {
      font-size: .26rem;
      margin-top: 1em;
      overflow: hidden;
    }

    .title__tip--ready,.title__tip--share{
      float: left;
      margin-right: .8rem;

    }

    .title__icon {
      margin-right: .1rem;
    }

    .task {
      border-top: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
      margin-top: .3rem;
      background: #fff;
      padding: .2rem .4rem;
    }

    .task__content {
      font-size: .26rem;
      color: #666;
      line-height: 2em;
      white-space: pre-wrap;
    }

    footer{
      font-size: .32rem;
      text-align: center;
      background: #fff;
      border-top: 1px solid #ebebeb;
      margin-top: .3rem;
      padding-bottom: .3rem;
    }

    .footer__name{
      font-weight: bold;
    }

    .qr {
      display: block;
      margin: .6rem auto .4rem;
      width: 1.8rem;
    }

    .footer__last{
      color: #666;
      margin: .8rem 0 .3rem;
    }

  </style>
</head>

<body>
  <div id="app">
   <header>

   </header>
   <section class="user">
     <img class="portrait" src="{{ $param['head_img'] }}"></img>
     <span class="name">{{ $param['nick_name'] }}</span>
     <span>请求帮找</span>
   </section>
   <section class="title">
     <div class="title__content">{{ $param['title'] }}</div>
     <div class="title__amount">
        <div class="title__amount-t">共享酬金<span class="bold">{{ $param['share_amount'] }}</span>元</div>
        <div class="title__btn">长按帮Ta找</div>
     </div>
     <div class="title__tip">
       @if ( $param['has_pay'] == 1 )
       <div class='title__tip--ready' >
           <img src='https://bangz.oss-cn-hangzhou.aliyuncs.com/h5/share_timeline_base/true.png' class='title__icon'>
           <span class='title__tag'>已缴纳酬金</span>
       </div>
       @endif
       <div class='title__tip--share'>
           <img src='https://bangz.oss-cn-hangzhou.aliyuncs.com/h5/share_timeline_base/jinggao.png' class='title__icon''>
           <span class='title__tag'>分享链上的人可共享酬金</span>
       </div>
      </div>
   </section>
   <section class="task">
     <div class="task__content">{{ $param['task_content'] }}</div>

   </section>
   <footer>
     <img class="qr" src="{{ $param['qrcode'] }}">
     <div class="footer__tip">
       <span class="footer__name">{{ $param['nick_name'] }}</span>请你帮找，
       <span class="red">最高可获取<span class="bold">{{ $param['one_amount'] }}</span>元</span>
     </div>
     <div class="footer__last">-&emsp;帮找&emsp;-</div>
   </footer>
  </div>
  <script>
    (function () {
      function refreshRem() {
        document.documentElement.style.fontSize = (Math.min(screen.width, 750) / 750) * 100 + 'px';
      }
      window.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }, false);
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }
      }, false);
      var tid;
      refreshRem()
    })()
    // html2canvas(app,{
    //   width: 750,
    //   backgroundColor: '#f7f7f7'
    // }).then(function(canvas) {
        // var a = document.createElement('a')
        // a.setAttribute('download','name.png')
        // a.href = canvas.toDataURL("image/png");
        // a.click()
        // document.body.append(canvas)
        // app.style.display = 'none'
    // });
  </script>
</body>

</html>